import {XYCoord} from "react-dnd";
import {Summary} from "../../entity/Summary";
import {Table, Typography} from "antd";
import React, {FC} from "react";
import {ColumnsType} from "antd/lib/table/interface";

export type TableAreaProps = {
  pos2: XYCoord,
  width: number,
  pos1: XYCoord,
  clickIndex: number,
  summary: Summary[],
  onRowClick: (index: number) => void
}


export const TableArea: FC<TableAreaProps> = (props) => {
  const {onRowClick, pos2, width, pos1, clickIndex, summary} = props;
  if (summary.length === 0) return null
  let protoNumbers = summary.map(x => x.protocol.length);
  let infoNumbers = summary.map(x=>x.info.length);
  const columns: ColumnsType<Summary> = [
    {
      title: <span>&nbsp;No.</span>,
      dataIndex: 'no',
      width: 40,
      render: (text: any, record: Summary, index: number) => <div style={{
        padding: '0 4px',
        display: 'flex',
        justifyContent: 'flex-end'
      }}>{text}</div>
    },
    {
      title: <span>&nbsp;Time</span>,
      dataIndex: 'timeStr',
      width: 190,
      render: (text: any, record: Summary, index: number) => <div style={{padding: '0 4px'}}>{text}</div>
    },
    {title: <span>&nbsp;Source</span>, dataIndex: 'source', width: 160},
    {title: <span>&nbsp;Destination</span>, dataIndex: 'destination', width: 160},
    {
      title: <span>&nbsp;Protocol</span>,
      dataIndex: 'protocol',
      width: Math.max(...protoNumbers) * 10,
      ellipsis: true,
    },
    {
      title: <span>&nbsp;Length</span>,
      dataIndex: 'length',
      align: 'center',
      width: 50,
      render: (text: any, record: Summary, index: number) => <div style={{
        padding: '0 4px',
        display: 'flex',
        justifyContent: 'flex-end'
      }}>{text}</div>
    },
    {
      title: <span>&nbsp;Info</span>,
      dataIndex: 'info',
      width: Math.max(...infoNumbers) * 10,
      render: (text: any, record: Summary, index: number) => <div style={{padding: '0 4px'}}>{text}</div>
    },

  ]

  return <div style={{height: pos2.y, border: '1px solid #eee', boxSizing: 'border-box'}}>
    <Table
      style={{width: width - pos1.x, background: 'red', height: "100%"}}
      columns={columns}
      rowClassName={(record, index) => {
        if (index === clickIndex) {
          return 'act-row';
        } else {
          if (index % 2 === 0) {
            return 'even-row';
          } else {
            return 'odd-row';
          }
        }
      }}
      rowKey={'no'}
      pagination={false}
      size={'small'}
      scroll={{y: pos2.y - 25, x: 1200}}
      dataSource={summary}
      onRow={(record, index) => {
        return {
          onClick: () => {
            if (typeof index === "undefined") {
              console.log("找不到index")
              return
            }
            onRowClick(index)
          }
        }
      }}
    />
  </div>;
};
